<template>
    <div id="news">
        <el-row>
            <el-col :span="16" :offset="4">
                <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">玖玖盈</el-breadcrumb-item>
                    <el-breadcrumb-item>新闻中心</el-breadcrumb-item>
                </el-breadcrumb>
                <el-row :gutter="10">
                    <el-col :span="14">
                        <el-row>
                            <el-col>
                                <h3 class="title"><router-link class="news-title" :to="'/newsType?articleType='+mapObj[0].key">{{mapObj[0].name}}</router-link></h3>
                                <ul class="video-list" v-if="mapObj[0].data.length">
                                    <li v-for="(article, i) in mapObj[0].data" :key="i">
                                        <a v-if="article.jumpUrl" :href="article.jumpUrl" target="_blank" class="article-target">
                                            <div class="thumb">
                                                <img :src="UPLOAD_URL + article.headerImgUrl" alt="">
                                            </div>
                                            <div class="right-content">
                                                <div class="article-title">{{article.articleTitle}}</div>
                                                <div class="article-time">{{formatTime(article.time)}}</div>
                                            </div>
                                        </a>
                                        <router-link v-else class="article-target" :to="'/newsDetail?id=' + article.articleId">
                                            <div class="thumb">
                                                <img v-if="article.headerImgUrl" :src="UPLOAD_URL + article.headerImgUrl" alt="">
                                            </div>
                                            <div class="right-content">
                                                <div class="article-title">{{article.articleTitle}}</div>
                                                <div class="article-time">{{formatTime(article.time)}}</div>
                                            </div>
                                        </router-link>
                                    </li>
                                </ul>
                                <ul v-else class="no-data">
                                    <li class="tac">暂无内容</li>
                                </ul>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <h3 class="title"><router-link class="news-title" :to="'/newsType?articleType='+mapObj[2].key">{{mapObj[2].name}}</router-link></h3>
                                <ul class="video-list" v-if="mapObj[2].data.length">
                                    <li v-for="(article, i) in mapObj[2].data" :key="i">
                                        <a v-if="article.jumpUrl" :href="article.jumpUrl" target="_blank" class="article-target">
                                            <div class="thumb">
                                                <img :src="UPLOAD_URL + article.headerImgUrl" alt="">
                                            </div>
                                            <div class="right-content">
                                                <div class="article-title">{{article.articleTitle}}</div>
                                                <div class="article-time">{{formatTime(article.time)}}</div>
                                            </div>
                                        </a>
                                        <router-link v-else class="article-target" :to="'/newsDetail?id=' + article.articleId">
                                            <div class="thumb">
                                                <img v-if="article.headerImgUrl" :src="UPLOAD_URL + article.headerImgUrl" alt="">
                                            </div>
                                            <div class="right-content">
                                                <div class="article-title">{{article.articleTitle}}</div>
                                                <div class="article-time">{{formatTime(article.time)}}</div>
                                            </div>
                                        </router-link>
                                    </li>
                                </ul>
                                <ul v-else class="no-data">
                                    <li class="tac">暂无内容</li>
                                </ul>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <h3 class="title"><router-link class="news-title" :to="'/newsType?articleType='+mapObj[4].key">{{mapObj[4].name}}</router-link></h3>
                                <ul class="video-list" v-if="mapObj[4].data.length">
                                    <li v-for="(article, i) in mapObj[4].data" :key="i">
                                        <a v-if="article.jumpUrl" :href="article.jumpUrl" target="_blank" class="article-target">
                                            <div class="thumb">
                                                <img v-if="article.headerImgUrl" :src="UPLOAD_URL + article.headerImgUrl" alt="">
                                            </div>
                                            <div class="right-content">
                                                <div class="article-title">{{article.articleTitle}}</div>
                                                <div class="article-time">{{formatTime(article.time)}}</div>
                                            </div>
                                        </a>
                                        <router-link v-else class="article-target" :to="'/newsDetail?id=' + article.articleId">
                                            <div class="thumb">
                                                <img :src="UPLOAD_URL + article.headerImgUrl" alt="">
                                            </div>
                                            <div class="right-content">
                                                <div class="article-title">{{article.articleTitle}}</div>
                                                <div class="article-time">{{formatTime(article.time)}}</div>
                                            </div>
                                        </router-link>
                                    </li>
                                </ul>
                                <ul v-else class="no-data">
                                    <li class="tac">暂无内容</li>
                                </ul>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="10">
                        <el-row>
                            <el-col>
                                <h3 class="title"><router-link class="news-title" :to="'/newsType?articleType='+mapObj[1].key">{{mapObj[1].name}}</router-link></h3>
                                <ul class="hot-wrap" v-if="mapObj[1].data.length">
                                    <li v-for="(article, i) in mapObj[1].data" :key="i">
                                        <a v-if="article.jumpUrl" :href="article.jumpUrl" target="_blank" class="article-target">
                                            <span :class="[i<3?'hot hot-'+i:'hot']">{{i+1}}</span><span class="hot-content">{{article.articleTitle}}</span>
                                        </a>
                                        <router-link v-else class="article-target" :to="'/newsDetail?id=' + article.articleId">
                                            <span :class="[i<3?'hot hot-'+i:'hot']">{{i+1}}</span><span class="hot-content">{{article.articleTitle}}</span>
                                        </router-link>
                                    </li>
                                </ul>
                                <ul v-else class="no-data">
                                    <li class="tac">暂无内容</li>
                                </ul>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <h3 class="title"><router-link class="news-title" :to="'/newsType?articleType='+mapObj[3].key">{{mapObj[3].name}}</router-link></h3>
                                <ul class="hot-wrap" v-if="mapObj[3].data.length">
                                    <li v-for="(article, i) in mapObj[3].data" :key="i">
                                        <a v-if="article.jumpUrl" :href="article.jumpUrl" target="_blank" class="article-target">
                                            <span :class="[i<3?'hot hot-'+i:'hot']">{{i+1}}</span><span class="hot-content">{{article.articleTitle}}</span>
                                        </a>
                                        <router-link v-else class="article-target" :to="'/newsDetail?id=' + article.articleId">
                                            <span :class="[i<3?'hot hot-'+i:'hot']">{{i+1}}</span><span class="hot-content">{{article.articleTitle}}</span>
                                        </router-link>
                                    </li>
                                </ul>
                                <ul v-else class="no-data">
                                    <li class="tac">暂无内容</li>
                                </ul>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <h3 class="title"><router-link class="news-title" :to="'/newsType?articleType='+mapObj[5].key">{{mapObj[5].name}}</router-link></h3>
                                <ul class="hot-wrap" v-if="mapObj[5].data.length">
                                    <li v-for="(article, i) in mapObj[5].data" :key="i">
                                        <a v-if="article.jumpUrl" :href="article.jumpUrl" target="_blank" class="article-target">
                                            <span :class="[i<3?'hot hot-'+i:'hot']">{{i+1}}</span><span class="hot-content">{{article.articleTitle}}</span>
                                        </a>
                                        <router-link v-else class="article-target" :to="'/newsDetail?id=' + article.articleId">
                                            <span :class="[i<3?'hot hot-'+i:'hot']">{{i+1}}</span><span class="hot-content">{{article.articleTitle}}</span>
                                        </router-link>
                                    </li>
                                </ul>
                                <ul v-else class="no-data">
                                    <li class="tac">暂无内容</li>
                                </ul>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getArticle } from '@/api/api'
export default {
    data: function() {
        return {
            mapObj: [{
                name: '每日新闻',
                key: 'news',
                data: [],
                size: 5
            }, {
                name: '盘中快报',
                key: 'fast',
                data: [],
                size: 10
            }, {
                name: '聚焦热点',
                key: 'hot',
                data: [],
                size: 5
            }, {
                name: '每日金股',
                key: 'dailyStock',
                data: [],
                size: 10
            }, {
                name: '公众号平台',
                key: 'discuss',
                data: [],
                size: 5
            }, {
                name: '一句话读早晚评',
                key: 'forecast',
                data: [],
                size: 10
            }]
        }
    },
    created: function() {
        this.getArticleList();
    },
    methods: {
        getArticleList: function() {
            this.mapObj.map(item => {
                getArticle({ articleCategoryType: item.key, pageSize: item.size, pageId: 1 }).then(res => {
                    item['data'] = res.list;
                })
            })
        },
        formatTime: function(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
            var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
            var mins = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            var sec = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            return year + '-' + month + '-' + day + ' ' + hours + ':' + mins + ':' + sec;
        }
    }
}

</script>
<style scoped>
.title{
    margin: 10px 0;
}
.video-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.video-list li {
    line-height: 20px;
    margin: 3px 0;
    padding: 0;
    /*border: 1px solid #c5c0c0;*/
    /*border-radius: 2px;*/
    transition: all .3s linear;
}

.article-target {
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: none;
    transition: all .3s linear;
    color: #5a5f67;
    overflow: hidden;
    zoom: 1;
}

.thumb {
    width: 120px;
    height: 80px;
    background-color: rgba(0, 0, 0, .1);
    float: left;
}

.thumb img {
    width: 100%;
    height: 100%;
}

.right-content {
    width: calc(100% - 130px);
    float: left;
    margin-left: 10px;
}

.article-title {
    margin: 5px 0 10px;
    font-size: 18px;
    line-height: 1.2;
}

.article-time {
    font-size: 14px;
    /*line-height: 2;*/
}

.video-list li:hover {
    box-shadow: 0 3px 18px 0 rgba(0, 0, 0, .3);
}

.video-list li:hover .article-target {
    color: #c32525;
}

.news-title {
    text-decoration: none;
    color: #6b3e3e;
    font-size: 24px;
}
.hot-wrap{
    list-style: none;
    margin: 0;
    padding: 0;
}
.hot-wrap li{
    margin: 5px 0;
}
.no-data {
    list-style: none;
    margin: 50px 0;
    padding: 0;
}

.tac {
    text-align: center;
}
.hot{
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    background-color: #69a3e0;
    color: #fff;
    font-weight: bold;
}
.hot-0{
    background-color: #e83b3b;
}
.hot-1{
    background-color: #e28853;
}
.hot-2{
    background-color: #e4b224;
}
.hot-content{
    font-size: 18px;
    display: inline-block;
    width: calc(100% - 40px);
    line-height: 30px;
    margin-left: 10px;
    transition: all .3s linear;
    vertical-align: top;
}
.hot-content:hover{
    color: #d80f0f;
}
</style>
